<template>
	<view class="my-container">
		<view class="user-info" @click="judge">
			<view class="avatar">
				<image
					:src=" token && userinfo.avatar ? `${$imageUrl + userinfo.avatar}` : '../../static/优转.png'">
				</image>
			</view>
			<view class="username">
				{{ token ? userinfo.nickName : '登录/注册' }}
			</view>
		</view>
		<view class="other-right">

			<view class="normal-right">
				<view class="item">
					<view class="item-left">
						<i class="iconfont icon-like"></i>
						<text>想要</text>
					</view>
					<view class="item-right">
						<text class="count"></text>
						<uni-icons color="#999" type="forward"></uni-icons>
					</view>
				</view>
				<view class="item">
					<view class="item-left">
						<i class="iconfont icon-dingyue1"></i>
						<text>订阅</text>
					</view>
					<view class="item-right">
						<text class="count"></text>
						<uni-icons color="#999" type="forward"></uni-icons>
					</view>
				</view>
				<view class="item" @click="gotoAddress">
					<view class="item-left">
						<i class="iconfont icon-address"></i>
						<text>地址</text>
					</view>
					<view class="item-right">
						<text class="count"></text>
						<uni-icons color="#999" type="forward"></uni-icons>
					</view>
				</view>
				<view class="item">
					<view class="item-left">
						<i class="iconfont icon-footprint"></i>
						<text>足迹</text>
					</view>
					<view class="item-right">
						<text class="count"></text>
						<uni-icons color="#999" type="forward"></uni-icons>
					</view>
				</view>
			</view>

			<view class="order-info">
				<view class="order-info-top">
					<view class="order-detail" @click="gotoOrderList(0)">
						<text>订单</text>
						<uni-icons type="forward"></uni-icons>
					</view>
				</view>
				<view class="order-info-bottom">
					<view class="item" @click="gotoOrderList(1)">
						<i class="iconfont icon-daifukuan"></i>
						<text>待付款</text>
					</view>
					<view class="item" @click="gotoOrderList(2)">
						<i class="iconfont icon-daifahuo1"></i>
						<text>待发货</text>
					</view>
					<view class="item" @click="gotoOrderList(3)">
						<i class="iconfont icon-truck-incomplete"></i>
						<text>待收货</text>
					</view>
				</view>
			</view>

			<view class="join-us">
				<view class="indiviual wrapper" @click="applyToBeSeller">
					<view class="indiviual-left">
						<view class="title">
							申请个人商家
						</view>
						<view class="desc">
							出售闲置 快速回血
						</view>
					</view>
					<view class="indiviual-right">
						<uni-icons type="forward"></uni-icons>
					</view>
				</view>
				<view class="company wrapper">
					<view class="company-left">
						<view class="title">
							企业/品牌商家入驻
						</view>
						<view class="desc">
							诚邀优质商家
						</view>
					</view>
					<view class="company-right">
						<uni-icons type="forward"></uni-icons>
					</view>
				</view>
			</view>

			<view class="logout" @click="logout" v-if="token">
				退出登录
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	import badgeMix from '@/mixins/tabbar-badge.js'
	export default {
		mixins: [badgeMix],
		data() {
			return {

			}
		},
		computed: {
			...mapState('module_user', ['token', 'userinfo']),
		},
		methods: {
			...mapMutations('module_user', ['updateToken', 'updateUserInfo', 'updateRedirectInfo', 'updateMyAddress']),
			...mapMutations('module_cart', ['updateCart']),
			judge() {
				if (!this.token || this.token === '') {
					this.updateRedirectInfo({
						openType: 'switchTab',
						from: '/pages/my/my'
					})
					uni.navigateTo({
						url: '/subcontract/sign_in/sign_in'
					})
					return false
				}
				return true
			},
			async logout() {
				const res = await uni.showModal({
					title: '提示',
					content: '确认退出登录吗？'
				}).catch(err => err)
				console.log(res);
				if (res[1].errMsg === 'showModal:ok' && res[1].confirm) {
					this.updateUserInfo({})
					this.updateToken('')
					this.updateCart([])
					this.updateMyAddress([])
				}
			},
			gotoOrderList(state) {
				if(!this.judge()) return
				uni.navigateTo({
					url: `/subcontract/order_list/order_list?state=${state}`
				})
			},
			navigatorBack() {
				this.updateRedirectInfo({
					openType: 'switchTab',
					from: '/pages/my/my'
				})
			},
			gotoAddress() {
				if(!this.judge()) return
				uni.navigateTo({
					url: '/subcontract/address_management/address_management'
				})
			},
			applyToBeSeller() {
				if(!this.judge()) return
				uni.navigateTo({
					url: '/subcontract/apply_seller/apply_seller'
				})
			}
		}
	}
</script>

<style lang="scss">
	.my-container {
		width: 100%;
		height: 100%;
	}

	.user-info {
		// height: 50px;
		display: flex;
		padding: 40rpx 20rpx;
		box-sizing: border-box;
		background-color: #fff;
	
	.avatar {
			width: 50px;
			height: 50px;
			overflow: hidden;
			border-radius: 50%;
			margin-right: 20rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}
	
	.username {
			line-height: 50px;
		}
	}

	.other-right {
		width: 100%;
		// margin: 20rpx 0;
		padding: 20rpx;
		box-sizing: border-box;
	}

	.order-info {
		padding: 20rpx;
		border-radius: 8rpx;
		background-color: #fff;

		.order-info-top {
			width: 100%;
			height: 30px;

			.order-detail {
				width: 100%;
				line-height: 30px;
				display: flex;
				font-size: 14px;
				font-weight: bold;
				justify-content: space-between;
			}
		}

		.order-info-bottom {
			width: 100%;
			display: flex;
			justify-content: space-around;

			.item {
				width: 25%;
				display: flex;
				margin: 20rpx 0;
				align-items: center;
				flex-direction: column;
				justify-content: center;

				.iconfont {
					font-size: 24px;
					font-weight: bold;
				}

				text {
					color: #999;
					font-size: 12px;
					margin-top: 22rpx;
				}
			}
		}
	}

	.normal-right {
		// margin: 20rpx 0;
		margin-bottom: 20rpx;
		width: 100%;
		display: flex;
		padding: 20rpx;
		flex-wrap: wrap;
		border-radius: 8rpx;
		box-sizing: border-box;
		background-color: #fff;

		.item {
			width: 50%;
			display: flex;
			height: 40px;
			box-sizing: border-box;
			padding: 24rpx;
			justify-content: space-between;

			.item-left {
				display: flex;
				align-items: center;
				font-weight: bold;
				vertical-align: bottom;

				text {
					margin-left: 10rpx;
					font-size: 14px;
				}

				i {
					font-size: 18px;
				}
			}

			.item-right {
				color: #999;
				display: flex;
				align-items: center;

				.count {
					font-size: 12px;
					margin-right: 8rpx;
				}
			}

			&:nth-child(odd) {
				border-right: 1px solid #f0f0f0;
			}

			&:not(:nth-last-of-type(-n+2)) {
				border-bottom: solid 1px #f0f0f0;
			}
		}
	}

	.join-us {
		width: 100%;
		display: flex;
		margin: 20rpx 0;
		background-color: #fff;
		box-sizing: border-box;
		border-radius: 8rpx;

		.wrapper {
			.title {
				font-weight: bold;
			}

			.desc {
				color: #999;
				font-size: 12px;
				margin-top: 20rpx;
			}
		}

		.indiviual {
			width: 50%;
			display: flex;
			padding: 24rpx;
			font-size: 14px;
			box-sizing: border-box;
			justify-content: space-between;
			border-right: 1px solid #f0f0f0;

			.indiviual-right {
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}

		.company {
			width: 50%;
			display: flex;
			padding: 24rpx;
			font-size: 14px;
			box-sizing: border-box;
			justify-content: space-between;

			.company-right {
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}

	.logout {
		width: 100%;
		height: 45px;
		line-height: 45px;
		text-align: center;
		background-color: #fff;
		font-size: 14px;
		letter-spacing: 2px;
	}
</style>
